<template>
  <div :class="classes || ''" class="column no-wrap bg-white-6 border-8 shadow-1 q-pa-md relative-position">
    <div class="row items-center">
      <div class="text-subtitle1 text-bold">{{ '设备状态统计' }}</div>
      <q-space></q-space>
    </div>
    <q-separator class="q-my-sm"></q-separator>
    <div class="col q-mx-auto">
      <div :class="isHoverChart ? 'cursor-hover-image' : ''" class="temp-chart-cls full-height relative-position"
           @click.stop="handleClick">
        <QCharts v-model:chartSize="chartSize" :charts="charts" :title="title"
                 classes="absolute-full no-shadow no-padding " @click="handleClick"></QCharts>
        <div class="cursor-pointer-dom absolute-center cursor-pointer" @mouseenter="handleMouseEnter"
             @mouseleave="handleMouseLeave"></div>
      </div>
    </div>
  </div>
  <q-modal v-model="modalVisible" v-model:loading="loading" :header="header" :menuBtn="false" :persistent="false"
           full-height full-width nonScrollArea>
    <AGVCtrl non-search></AGVCtrl>
  </q-modal>
</template>
<script setup>
import { i18n } from 'boot/i18n.js'
import { AGVStatus } from 'src/enum/index.js'
import { adaptFontSize } from 'src/utils/utils.js'
import AGVCtrl from 'src/views/AGVCore/AGVCtrl.vue'
import { computed, ref } from 'vue'

const props = defineProps({ rowInfo: { type: Object, default: () => ({}) }, classes: String })

const header = ref('')
const loading = ref(false)
const isHoverChart = ref(false)
const modalVisible = ref(false)

const colors = {
  'light-blue-4': '#4fc3f7', 'green-4': '#81c784', 'amber-4': '#ffd54f', 'red-4': '#e57373', 'grey-4': '#e0e0e0'
}
const chartSize = ref({ width: 0, height: 0 })
const filterAGVStatus = computed(() => AGVStatus.value.filter(el => el.value !== 'TOTALS'))
const rows = computed(() => {
  const { rowInfo = {} } = props
  return filterAGVStatus.value.map(col => {
    return { name: col.label, value: rowInfo[col.value] || 0, color: colors[col.color], field: col.value }
  })
})
const title = computed(() => {
  const size = adaptFontSize(10), { rowInfo = {} } = props
  return {
    text: `{title|${i18n.t('AGVCore.AGVStatusTip8')}}\n{value|${rowInfo.TOTALS || 0}}`,
    position: 'center', top: 'middle', left: 'center',
    textStyle: {
      rich: {
        title: { fontSize: size * 1.6, color: '#000', fontWeight: '400', padding: [size, 0, size * 0.5, 0] },
        value: { fontSize: size * 2.4, color: '#000', fontWeight: '600' }
      }
    }
  }
})
const charts = computed(() => {
  const size = adaptFontSize(10), { width } = chartSize.value
  return [{
    type: 'pie', name: '', center: ['50%', '50%'], radius: ['45%', '68%'], silent: true,
    emptyCircleStyle: { color: 'rgba(255, 255, 255, 0.35)' },
    label: {
      formatter: '{b}\n{c}', color: '#616161', fontsize: size * 1.4, fontWeight: '500',
      alignTo: 'edge', minMargin: size * 0.5, edgeDistance: size, lineHeight: size * 1.5
    },
    labelLayout: (params) => {
      const isLeft = params.labelRect.x < width / 2, points = params.labelLinePoints
      points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
      return { labelLinePoints: points }
    },
    data: rows.value.map(el => ({ ...el, itemStyle: { color: el.color } }))
  }]
})

const handleMouseEnter = () => isHoverChart.value = true
const handleMouseLeave = () => isHoverChart.value = false
const handleClick = () => {
  header.value = '设备状态详情'
  modalVisible.value = true
}
</script>
<style lang="scss" scoped>
.temp-chart-cls {
  aspect-ratio: 10/9;
  max-width: 100%;
}

.cursor-pointer-dom {
  border-radius: 100%;
  width: v-bind('`${chartSize.height * 0.7}px`');
  height: v-bind('`${chartSize.height * 0.7}px`');
}
</style>